<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script type="text/javascript" src="d3.js"></script>
    
    <style>
    
    .axis path{
        fill:none;
        stroke: black;
    }
    .axis {
        font-size:8pt;
        font-family:sans-serif;
    }
    .tick {
        fill:none;
        stroke:black;
    }
    circle{
        stroke:black;
        stroke-width:0.5px;
        fill:RoyalBlue;
        opacity:0.6;
    }
    
    
    
    </style>
    
    <script>
    function draw(data) {
        "use strict";
        
        var margin = 50,
            width = 700,
            height = 300,
            x_extent = d3.extent(data, function(d){return d.collision_with_injury}),
            y_extent = d3.extent(data, function(d){return d.dist_between_fail});
            
        var x_scale = d3.scale.linear()
            .range([margin,width-margin])
            .domain(x_extent)
        
        var y_scale = d3.scale.linear()
            .range([height-margin, margin])
            .domain(y_extent)
        
        var x_axis = d3.svg.axis().scale(x_scale)
        var y_axis = d3.svg.axis().scale(y_scale).orient('left')
        
        
        d3.select("body")
          .append('svg')
            .attr('width', width)
            .attr('height', height)
          .selectAll('circle')
          .data(data)
          .enter()
          .append('circle')
            .attr('cx', function(d){return x_scale(d.collision_with_injury)})
            .attr('cy', function(d){return y_scale(d.dist_between_fail)})
            .attr('r', 5)
        
        d3.select("svg") 
          .append("g") 
            .attr("class", "x axis") 
            .attr("transform", "translate(0," + (height-margin) + ")") 
          .call(x_axis);
        
        d3.select("svg") 
          .append("g") 
            .attr("class", "y axis") 
            .attr("transform", "translate(" + margin + ", 0 )") 
          .call(y_axis);
         
        d3.select('.y.axis')
            .append('text')
            .text('mean distance between failure (miles)')
            .attr('transform', "rotate (-90, -43, 0) translate(-280)")
                    
        d3.select('.x.axis')
          .append('text')
            .text('collisions with injury (per million miles)')
            .attr('x', function(){return (width / 2) - margin})
            .attr('y', margin/1.5)
        
    }
    </script>
</head>
<body>
    <script>
        d3.json('data/bus_perf.json', draw);
    </script>
</body>
</html>
